<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改页面</title>
    <link rel="stylesheet" href="/common/css/bootstrap.css">
    <link rel="stylesheet" href="/css/basic.css">
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@4.7.11/dist/wangEditor.min.js"></script>
    <script src="/common/js/jquery-1.10.1.js"></script>
</head>

<body>
    <!-- 导航 -->
    <!-- 引入头部内容 -->
    <%- include('../common/header.ejs')%>
        <!-- 主题内容 -->
        <div class="container-fluid">
            <div class="row">
                <%- include('../common/sidebar.ejs',{flag:4})%>
                    <div class="col-sm-10">
                        <ol class="breadcrumb">
                            <li>商品管理
                            </li>
                            <li class="active">修改商品</li>
                        </ol>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                修改商品
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive input-form">
                                    <form action="/product/doeditproduct/<%= productData._id %>" method="post" enctype="multipart/form-data">
                                        <ul>
                                            <li> 商品名称: <input type="text" name="title" value="<%= productData.title %>" /></li>
                                            <li>
                                                商品一级分类: <select name="cate_id" id="cate_id" data-id="<%= productData.cate_id %>">
                                        <option value="1">男装</option>
                                        <option value="2">女装</option>
                                        <option value="3">童装</option>
                                    </select>
                                            </li>
                                            <li>
                                                商品二级分类: <select name="goods_id" id="goods_id" data-id="<%= productData.goods_id %>">
                                        <option value="100001">海澜之家</option>
                                        <option value="200001">拉夏贝尔</option>
                                        <option value="300001">kids</option>
                                    </select>
                                            </li>
                                            <!-- value="<%= productData.title %>"  -->
                                            <li> 商品图片: <input type="file" name="pic" id="file" /></li>
                                            <li><img src="<%= productData.pic %>" alt="" style="width: 50px;" class="thumbnail"></li>
                                            <li> 商品价格: <input type="text" name="price" value="<%= productData.price %>" /></li>
                                            <li> 商品邮费: <input type="text" name="fee" value="<%= productData.fee %>" /></li>
                                            <li>
                                                商品描述:
                                                <div id="div1">
                                                    <%- productData.description %>
                                                </div>
                                                <textarea name="description" style="visibility: hidden;width: 0;height: 0;" id="text1">
                                                    <%- productData.description %>
                                                </textarea>
                                            </li>
                                            <li>
                                                <br/>
                                                <button type="submit" class="btn btn-default">提交</button>
                                            </li>
                                        </ul>
                                    </form>
                                </div>
                            </div>

                        </div>

                    </div>
            </div>
        </div>
        <script>
            $('#file').on("change", function() {
                // 实例化读取文件的对象
                let fileReader = new FileReader();
                fileReader.readAsDataURL(this.files[0]);
                // 等待文件上传完毕在读取
                fileReader.onload = function() {
                    // 把读取的base64格式给src 
                    $(".thumbnail")[0].src = fileReader.result;
                };
            })
        </script>
        <script>
            // 挂在再window上,把编辑器的对象
            var E = window.wangEditor;
            // 实例化一个编辑器
            var editor = new E('#div1');
            // 配置编辑的高度
            editor.config.height = 500;
            // 找到textareaDoｍ元素
            var $text1 = $('#text1');
            editor.config.onchange = function(html) {
                // 监控变化，同步更新到 textarea
                $text1.val(html);
            };
            // 初始化 textarea 的值
            // 修改不需要初始化
            // $text1.val(editor.txt.html());

            // 配置上传图片的接口
            editor.config.uploadImgServer = '/product/uploadimg';

            editor.create();
        </script>
        <script>
            $(function() {
                var cateRel = $('#cate_id').data('id');
                var goodsRel = $('#goods_id').data('id');
                // 找到属性值和id值匹配的元素然后设置选中
                console.log(cateRel);
                console.log(goodsRel);
                console.log($('#cate_id').children(`[value=${cateRel}]`));

                $('#cate_id').children(`[value=${cateRel}]`).prop('selected', true);
                $('#goods_id').children(`[value=${goodsRel}]`).prop('selected', true);
            })
        </script>
</body>

</html>